<template>
  <div class="main">
    <el-form :model="form" label-position="top" :rules="rules" ref="fromRef">
      <div class="back_img"></div>
      <div class="login">
        <div class="lgoinImg">
          <img src="../assets/img/logo.jpeg" />
        </div>
        <div class="login_title"></div>
        <div class="login_input">
          <el-form-item prop="userName">
          <el-input
            prefix-icon="User"
            placeholder="请输入账号"
            v-model="form.userName"
          ></el-input>
          </el-form-item>
        </div>
        <div class="login_input">
          <el-form-item prop="passWord">
          <el-input 
            prefix-icon="Lock"
            placeholder="请输入密码"
            show-password
            v-model="form.passWord"
          ></el-input>
        </el-form-item>
        </div>
        <!-- <el-select
          v-model="value"
          placeholder="请选择用户类型"
          class="login_input1"
        >
          <el-option
            v-for="item in types"
            :key="item.roleId"
            :label="item.roleName"
            :value="item.roleId"
          >
          </el-option>
        </el-select> -->
        <div class="login_button">
          <p @click="checkLogin(form)">登录</p>
          <p @click="checkLogin1">注册</p>
        </div>
      </div>
    </el-form>
  </div>
</template>
<script>
import { ref } from '@vue/reactivity'
// do not use same name with ref

export default {
  name: 'LoginRegister',
  data() {
    return {
      form: {
        roleID: '',
        roleName: '',
        userName: '',
        passWord: ''
      },
      types: [],
      value: '',
      login: []
    }
  },
  setup() {
    const rules = ref({
      userName: [
        {
          required: true,
          message: '请填写账户',
          trigger: 'blur'
        },
      ],
      passWord:[
        {
          required: true,
          message: '请填写密码',
          trigger: 'blur'
        }
      ]
    })
    
    return {rules}
  },
  mounted() {

  },
  methods: {
    checkLogin() {
       console.log(this.form.userName);
        console.log(this.form.passWord);
        if(this.form.userName=="1234"&&this.form.passWord=="wangzihan")
        this.$router.push({
          name:'carousel'
        })
        else
        alert("用户名或密码错误");

      // this.$router.push({
      //       name: 'Notice'
      //     })
    },
  }
}
</script>

<style scoped>
.back_img {
  background: url('../assets/img/login.jpeg');
  background-size: 100% 100%;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.login {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: rgb(228, 226, 226);
  opacity: 0.9;
  /* background: #65768557; */
  padding: 30px;
  width: 18%;
  border: 1px solid #eee;
  border-radius: 20px;
}
.lgoinImg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}
.lgoinImg img {
  width: 110px;
  height: 110px;
  background: #eceeed;
  border-radius: 50%;
  border: 10px solid #fff;
}

.login_title {
  text-align: center;
  padding-bottom: 20px;
}
.login_input {
  margin-top: 15px;
}
.login_input:nth-child(2) {
  margin-bottom: 20px;
}
.login_input:nth-child(3) {
  margin-top: 20px;
}
.login_button {
  margin-top: 20px;
  display: flex;
}
.login_button p {
  color: #fff;
  font-size: 15px;
  display: block;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  width: 100%;
  border: 1px solid #ddd;
}
.login_button p:nth-child(1) {
  background: #409eff;
  margin-right: 10px;
}
.login_button p:nth-child(2) {
  background: #67c23a;
  margin-left: 10px;
}
</style>
